<template>
  <label :class="['custom-switch', size, { disabled: disabled }]">
    <input 
      type="checkbox" 
      :checked="modelValue" 
      @change="handleChange"
      :disabled="disabled"
    />
    <span class="slider round"></span>
  </label>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: [Boolean, Number, String],
    default: false
  },
  size: {
    type: String,
    default: 'medium', // small, medium, large
    validator: (value: string) => ['small', 'medium', 'large'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const handleChange = (event: Event) => {
  if (props.disabled) {
    // 如果禁用，阻止默认行为并恢复原状态
    event.preventDefault();
    return;
  }
  
  const target = event.target as HTMLInputElement;
  emit('update:modelValue', target.checked);
  emit('change', { detail: { value: target.checked } });
};
</script>

<style lang="scss" scoped>
.custom-switch {
  position: relative;
  display: inline-block;
  
  // 根据 size 属性设置不同的大小
  &.small {
    width: 36px;
    height: 20px;
    
    .slider:before {
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      transform: translateX(0);
    }
    
    input:checked + .slider:before {
      transform: translateX(16px);
    }
  }
  
  &.medium {
    width: 44px;
    height: 27px;
    
    .slider:before {
      height: 24px;
      width: 24px;
      left: 0px;
      bottom: 2px;
      transform: translateX(0);
    }
    
    input:checked + .slider:before {
      transform: translateX(20px);
    }
  }
  
  &.large {
    width: 52px;
    height: 32px;
    
    .slider:before {
      height: 28px;
      width: 28px;
      left: 2px;
      bottom: 2px;
      transform: translateX(0);
    }
    
    input:checked + .slider:before {
      transform: translateX(22px);
    }
  }
  
  input {
    opacity: 0;
    width: 0;
    height: 0;
    
    &:checked + .slider {
      background: linear-gradient(90deg, #006CFF 0%, #009FFF 100%);
    }
    
    &:focus + .slider {
      box-shadow: 0 0 1px #006CFF;
    }
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
    
    &:before {
      position: absolute;
      content: "";
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
  }
  
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    
    .slider {
      cursor: not-allowed;
    }
  }
}
</style>